<template>
<div>
  <myDivider name="设备管理"></myDivider>
  <!-- <el-alert :closable="false" title="三级菜单1" type="success" /> -->
  <el-page-header @back="goBack"   :content="this.operateType=='update'?'修改设备':'新增设备'" >
</el-page-header>
  <div class="insertDevice" >


    <el-form ref="insertForm" :model="insertForm" label-width="80px" :inline="true"  :rules="insertRules">
      <el-form-item label="设备编码:" :label-width="formLabelWidth" class="formItemStyle" prop="deviceNum">
        <el-input v-model="insertForm.deviceNum" autocomplete="off" style="width: 262px"></el-input>
      </el-form-item>

      <el-form-item label="设备名称:" :label-width="formLabelWidth" class="formItemStyle" prop="name">
        <el-input v-model="insertForm.name" autocomplete="off" style="width: 262px"></el-input>
      </el-form-item>
    </el-form>


    <el-form ref="form" :model="insertForm"  label-width="80px" :inline="true">
      
      <el-form-item label="位置:" :label-width="formLabelWidth" class="formItemStyle">
        <div class="block">
          <el-cascader v-model="insertForm.possitionIds" placeholder="试试搜索：1号仓库" :options="positionOptionsData" filterable 
             :props="{ checkStrictly: true, value:'id',label:'positionName'}" clearable style="width: 262px;">
          </el-cascader>
        </div>
      </el-form-item>


      <el-form-item label="状态:" :label-width="formLabelWidth" class="formItemStyle" >
        <el-select v-model="insertForm.state" placeholder="请选择"  style="width: 262px;">
          <el-option v-for="item in stateOptionsData" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

            
      <el-form-item label="类别:" :label-width="formLabelWidth" class="formItemStyle">
        <div class="block">
          <el-cascader v-model="insertForm.categoryIds" placeholder="试试搜索：电器" :options="categoryOptionsData" filterable 
            :disabled="insertForm.categoryDisable" :props="{ checkStrictly: true, value:'id',label:'name'}" clearable style="width: 262px;">
          </el-cascader>
        </div>
      </el-form-item>



      <el-form-item label="功能:" :label-width="formLabelWidth" class="formItemStyle">
        <el-select v-model="insertForm.function" placeholder="请选择" style="width: 262px;">
          <el-option v-for="item in deviceFunctionData" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form ref="form" :model="insertForm" label-width="80px" :inline="true">

      <el-form-item label="成本中心:" :label-width="formLabelWidth" class="formItemStyle" >
        <el-select v-model="insertForm.DCCValue" placeholder="请选择" style="width: 262px;">
          <el-option v-for="item in DCCData" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>





      <el-form-item label="关键性:" :label-width="formLabelWidth" class="formItemStyle">
        <el-select v-model="insertForm.criticalLevelValue" placeholder="请选择" style="width: 262px;">
          <el-option v-for="item in criticalLevelData" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="供应商:" :label-width="formLabelWidth" class="formItemStyle" >
        <el-select v-model="insertForm.supplierId" placeholder="请选择" style="width: 262px;">
          <el-option v-for="item in supplierData" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="制造商:" :label-width="formLabelWidth" class="formItemStyle" >
        <el-select v-model="insertForm.manufacturerId" placeholder="请选择" style="width: 262px;">
          <el-option v-for="item in manufacturerData" :key="item.value" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form ref="form" :model="insertForm" label-width="80px" :inline="true">

      <el-form-item label="型号:" :label-width="formLabelWidth" class="formItemStyle" >
        <el-input v-model="insertForm.model" autocomplete="off" style="width: 262px"></el-input>
      </el-form-item>


      <el-form-item label="可替换编码:" :label-width="formLabelWidth" class="formItemStyle" >
        <el-input v-model="insertForm.replaceableNum" autocomplete="off" style="width: 262px"></el-input>
      </el-form-item>
    </el-form>


    <el-form ref="form" :model="insertForm" label-width="80px" style="height: 41px;" >
      <el-form-item  style="float: right; margin-bottom: 80px;">
        <el-button type="primary" @click="onSubmitUpdate" v-if="this.operateType=='update'">修改</el-button>
        <el-button type="primary" @click="onSubmit" v-if="this.operateType=='insert'">添加</el-button>
        <el-button @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
  </div>
</div>
</template>

<style scoped>

.insertDevice {
  margin-top: 90px;
  margin-left: 130px;
  height: 50%;
}

.menuTable {
  margin-top: 100px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.menuTable .cell {
  text-align: center;
}

.findValue {
  width: 13%;
  margin-top: 20px;
  margin-left: 15px;
}

.operation {
  margin-right: 50px;
  float: right;
  margin-top: 20px;
}

.formStyle {
  width: 1300px;
  margin: 20px auto;
}

.formItemStyle {
  margin-bottom: 28px;
  margin-left: 22px;
}

.pageFooter {
  margin-top: 3%;
  margin-left: 40%;
}

.pageFooterFather {
  top: 84%;
  position: relative;
  width: 100%;
}

.el-cascader-menu {
  height: fit-content;
  width: fit-content;
}
</style>



<script>
import {
  insertDevice,
  updateDevice,
  getPositionData,
  getCategoryData,
  getDictionaryData,
  getSupplierData,
  getManufacturerData,
  getDeviceInfoById,

} from "./device";
export default {
  data() {
    return {
      formLabelWidth: "120px", //控制前面label的宽度
      insertForm: {
        // 新增弹框参数
        deviceNum:"",
        name: "",
        possition: "",
        possitionIds: [],
        state: "",
        categoryId: "",
        categoryIds: [],
        function: "",
        DCCValue: "",
        criticalLevelValue: "",
        supplierId: "",
        manufacturerId:"",
        model: "",
        replaceableNum: "",
        categoryDisable: false
      },
      insertRules: {
        deviceNum: [
          {
            required: true,
            message: "设备编号不能为空",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "设备名称不能为空",
            trigger: "blur",
          },
        ],
      },
      criticalLevelValue:[],
      DCCValue:[],
      fatherDepmentManageData: [],
      positionOptionsData:[],
      categoryOptionsData:[],
      deviceFunctionData:[],
      DCCData:[],
      criticalLevelData:[],
      supplierData:[],
      manufacturerData:[],
      stateOptionsData:[],
      operateType: 'insert',

    }
  },

  activated() {
      
      if (this.$route.query.operateType=='update') {
        this.getDeviceInfo(this.$route.query.id);
        this.operateType = 'update'
      }else{
        this.insertForm= {};
      }
      
    },
  mounted: function () {
    //初始化选项数据
    this.getPositionOptionsData();
    this.getCategoryOptionsData();
    this.getDictionaryDataEvery();
    this.getSupplierOptionsData();
    this.getManufacturerOptionsData();
  },
  methods: {


    
    onSubmit() {
      

      this.$refs['insertForm'].validate((valid) => {})
      if (this.insertForm.deviceNum==undefined||this.insertForm.deviceNum=="" || this.insertForm.name==undefined||this.insertForm.name=="") {
        return false;
      }
     

      //处理位置Id和分类Id两个参数
      if (this.insertForm.possitionIds != null && this.insertForm.possitionIds.length != 0) {
        this.insertForm.possition = this.insertForm.possitionIds[this.insertForm.possitionIds.length - 1];
      } else {
        this.insertForm.possition = 0
      }
      //处理位置Id和分类Id两个参数
      if (this.insertForm.categoryIds != null && this.insertForm.categoryIds.length != 0) {
        this.insertForm.categoryId = this.insertForm.categoryIds[this.insertForm.categoryIds.length - 1];
      } else {
        this.insertForm.categoryId = 0
      }
      insertDevice(this.insertForm).then((res) => {
        if (res.data.code == 200) {
          this.$message({
          message: '设备添加成功',
          type: 'success'
        });
        this.goBack();
        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }

      })
    },

    onSubmitUpdate() {

      //处理位置Id和分类Id两个参数
      if (this.insertForm.possitionIds != null && this.insertForm.possitionIds.length != 0) {
        this.insertForm.possition = this.insertForm.possitionIds[this.insertForm.possitionIds.length - 1];
      } else {
        this.insertForm.possition = 0
      }
      //处理位置Id和分类Id两个参数
      if (this.insertForm.categoryIds != null && this.insertForm.categoryIds.length != 0) {
        this.insertForm.categoryId = this.insertForm.categoryIds[this.insertForm.categoryIds.length - 1];
      } else {
        this.insertForm.categoryId = 0
      }
      this.insertForm.id=this.$route.query.id;
      updateDevice(this.insertForm).then((res) => {
        if (res.data.code == 200) {
          this.$message({
          message: '设备修改成功',
          type: 'success'
        });
        this.goBack();
        }else {
          this.$message({
            message: res.data.message,
            type: "warning",
          });
        }

      })
    },

    goBack() {
      // this.$router.go(-1)
      this.$router.push({path: '/device/deviceManage'});
      },
    getPositionOptionsData(){
      getPositionData().then((res) => {
        this.positionOptionsData = res;
      })
    },
    getCategoryOptionsData(){
      getCategoryData().then((res) => {
        this.categoryOptionsData = res;

      })
    },
    getDictionaryDataEvery(){
      getDictionaryData("device_function").then((res) => {
        this.deviceFunctionData = res;
      })
      
      getDictionaryData("DCC").then((res) => {
        this.DCCData = res;
      })
      
      getDictionaryData("critical_level").then((res) => {
        this.criticalLevelData = res;
      })
      
      getDictionaryData("device_state").then((res) => {
        this.stateOptionsData = res;
      })

    },

    getSupplierOptionsData(){
      getSupplierData().then((res) => {
        this.supplierData = res;
      })
    },

    getManufacturerOptionsData(){
      getManufacturerData().then((res) => {
        this.manufacturerData = res;
      })
    },

    getDeviceInfo(id){

      getDeviceInfoById(id).then((res) => {
        this.insertForm.deviceNum = res.serialNumber;
        this.insertForm.name = res.name;
        this.insertForm.possitionIds = res.positionId==0?'':  eval('(' + res.positionIds + ')');
        this.insertForm.state = res.state==0?'':res.state;
        this.insertForm.categoryIds = res.categoryId==0?'':   eval('(' + res.categoryIds + ')');
        this.insertForm.function = res.deviceFunction==0?'':res.deviceFunction;
        this.insertForm.DCCValue = res.costCenter==0?'':res.costCenter;
        this.insertForm.criticalLevelValue = res.criticalLevel==0?'':res.criticalLevel;
        this.insertForm.supplierId = res.supplierId==0?'':res.supplierId;
        this.insertForm.manufacturerId = res.manufacturerId==0?'':res.manufacturerId;
        this.insertForm.model = res.model;
        this.insertForm.replaceableNum = res.replaceableNumber;

      })
    },



  }
};
</script>